<template>
  <!-- 短信管理 -->
  <div>
      <div class="search-box">
      <el-form label-width="120px" size="mini">
        <el-row >

          <el-col :span="6">
            <el-form-item label="短信模板名称">
              <el-input v-model="searchData.templateName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模板类型">
              <el-select v-model="searchData.type" placeholder="请选择" size="mini">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" class="search-btn" @click="search">查询</el-button>
            <el-button type="primary" size="mini" class="reset-btn" @click="reset">重置</el-button>
            <el-button type="primary" size="mini" @click="add">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="table-content" style="margin-top: 20px">
      <el-table :data="tableData" border tooltip-effect="dark">
        <el-table-column
          prop="messageCode"
          align="center"
          label="短信编号"
        ></el-table-column>
        <el-table-column
          prop="templateName"
          align="center"
          label="短信模板名称"
        ></el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="模板类型"
          :formatter="transType"
        ></el-table-column>
        <!--<el-table-column
          prop="templateContent"
          align="center"
          label="短信模板内容"
        ></el-table-column>-->
        <!--<el-table-column
          prop="createUserName"
          align="center"
          label="创建人"
        ></el-table-column>-->
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column prop="date" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="modify(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableQuery.page"
          :page-sizes="[5, 10, 15,20]"
          :page-size="tableQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增短信模板 -->

    <!-- 编辑短信模板 -->

    <!-- 新增 -->
    <Add v-if="dialogVisible_add" :dialogVisible.sync="dialogVisible_add"></Add>
    <!-- 编辑 -->
    <Modify
      v-if="dialogVisible_modify"
      :dialogVisible.sync="dialogVisible_modify"
      :row="row"
    ></Modify>
  </div>
</template>

<script >
import Add from "./components/Add";
import Modify from "./components/Modify";

export default {
  components: { Add, Modify },
  data() {
    return {
      searchData: {
        messageCode: "",
        templateName: "",
        type: "",
        createStartTime: "",
        createEndTime: ""
      },
      options: [
        {
          value: "0",
          label: "首次回访",
        },
        {
          value: "1",
          label: "正常贷款回访",
        },
        {
          value: "2",
          label: "逾期贷款催收",
        },
      ],
      value: "",
      value1: "",
      options2: [
        {
          value: "1",
          label: "人工电话",
        },
        {
          value: "2",
          label: "AI机器人",
        },
        {
          value: "3",
          label: "短信",
        },
      ],
      options3: [
        {
          value: "1",
          label: "批量发送模板",
        },
        {
          value: "2",
          label: "手动发送模板",
        },
      ],
      tableData: [
        {

        },
      ],
      tableData2: [
        {

        },
      ],
      // 页码初始化数据
      total: 0, //总条目数
      tableQuery: {
        limit: 10, //每页现实的条数
        page: 1, //当前显示那页
      },
      dialogVisible_add: false, //新增
      dialogVisible_modify: false, //编辑


    };
  },
  methods: {
    transType(row, column, cellValue){
      let tt = this.options.find((ele) => (ele.value == cellValue));
      return tt ? tt.label:"";
    },
    //页码显示条目变化
    handleSizeChange(val) {
      this.tableQuery.limit = val;
      this.tableQuery.page = 1;
      this.showList()
    },
    // 页码跳转
    handleCurrentChange(val) {
      this.tableQuery.page = val;
      this.showList()
    },
    add() {
      this.dialogVisible_add = true;
    },
    modify(row) {
      console.log(row)
      this.row = row
      this.dialogVisible_modify = true;
    },
    search() {
      this.tableQuery.page = 1;
      this.showList();
    },
    reset() {
      this.searchData = {
        messageCode: "",
        templateName: "",
        type: "",
        createStartTime: "",
        createEndTime: ""
      }
    },
    showList() {
      let data = {
        size: this.tableQuery.limit,
        page: this.tableQuery.page-1,
        ...this.searchData,
      }
      // console.log(data)
      this.$http
        .get("/IAM/MC/template/showAll", {
          params: data,
        }).then(res => {
          let arr = res.data.content
          this.tableData = arr
          this.total = res.data.totalElements
          for(let key in arr) {
            let time = this.$moment(arr[key].createTime).format("YYYY-MM-DD")
            this.tableData[key].createTime = time
          }
      })
    },

    del(val) {
      this.$confirm("请确认是否删除短信模板?", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        console.log(val)
        this.$http.delete('/IAM/MC/template/delete/' + val.templateId, {}, ).then(res => {
          if (res.code == '200') {
            this.$message.success('删除成功')
            this.showList()
          }
        })
      });
    },
  },
  created(){
    this.search()
  }
};
</script>

<style lang="scss" scoped>
.table-content {
  .el-pagination {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
.pageBox {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
</style>

